<script>
import { mapGetters, mapState } from 'vuex'
import Icon from '../../components/Iconfont'
import imgAssembly from './imgAssembly.vue'

export default {
  components: {
    Icon: Icon,
    imgAssembly: imgAssembly
  },
  data() {
    return {
      index: 0,
      documentHeight: 0,

    }
  },
  computed: {
    ...mapState('banner', ['bannerList', 'isLoading']),
    ...mapGetters('banner', ['bannerListLen']),
    pictureHeight() {
      return this.index * this.documentHeight
    }
  },
  methods: {
    upBtn() {
      if (this.index === 0) {
        return;
      }
      this.index--;
    },
    downBtn() {
      if (this.index === this.bannerListLen - 1) {
        return;
      }
      this.index++;
    },
    handleScroll(e) {
      if (e.deltaY > 0) {
        if (this.index >= this.bannerListLen - 1) {
          return;
        }
        this.index++

      } else {
        if (this.index === 0) {
          return;
        }
        this.index--
      }
    },
    resizeDom() {
      this.documentHeight = document.documentElement.clientHeight;
    }
  },
  created() {
    this.$store.dispatch('banner/banner',)
  },
  mounted() {
    this.resizeDom()
    window.addEventListener('wheel', this.handleScroll);
    window.addEventListener('resize', this.resizeDom);
  },
  destroyed() {
    window.removeEventListener('wheel', this.handleScroll);
    window.removeEventListener('resize', this.resizeDom);
  }
}
</script>



<template>
  <div v-loading="isLoading" class="home-container">
    <div v-if="bannerList" class="picture" :style="{ marginTop: -this.pictureHeight + 'px' }">
      <imgAssembly v-for="item in bannerList" :key="item.id" :data="item"></imgAssembly>
    </div>

    <div class="arrow">
      <div v-show="index !== 0" class="btn" id="arrowUp" @click="upBtn">
        <Icon type="arrowUp" />
      </div>
      <div v-show="index !== bannerListLen - 1" class="btn" id="arrowDown" @click="downBtn">
        <Icon type="arrowDown" />
      </div>
    </div>

    <div class="dotList">
      <ul>
        <li v-for="(item, i) in bannerList" :key="item.id" :class="{ active: index === i }" @click="index = i"></li>
      </ul>
    </div>
  </div>
</template>



<style lang='less' scoped>
@import '~@/styles/var.less';

.home-container {
  position: relative;
  height: 100%;
  width: 100%;

  .picture {
    width: 100%;
    transition: 0.5s;
  }

  .arrow {

    .btn {
      position: fixed;
      left: 50%;
      transform: translateX(-50%);
      z-index: 99;
      transition: 0.5s;

      .iconfont {
        color: @gray;
        font-size: 32px;
      }
    }

    @arrowHeight : 5px;
    @arrowDoubleHeight : 15px;

    #arrowUp {
      top: 0;
      animation: upMoveing 1.3s infinite;
    }

    #arrowDown {
      bottom: 0;
      animation: downMoveing 1.3s infinite;
    }

    @keyframes upMoveing {
      0% {
        transform: translate(-50%, @arrowHeight);
      }

      50% {
        transform: translate(-50%, @arrowDoubleHeight);
      }

      100% {
        transform: translate(-50%, @arrowHeight);
      }
    }

    @keyframes downMoveing {
      0% {
        transform: translate(-50%, -@arrowHeight);
      }

      50% {
        transform: translate(-50%, -@arrowDoubleHeight);
      }

      100% {
        transform: translate(-50%, -@arrowHeight);
      }
    }
  }


  .dotList {
    position: fixed;
    right: 5px;
    top: 50vh;
    transform: translateY(-50%);
    z-index: 99;

    li {
      display: block;
      width: 8px;
      height: 8px;
      margin: 12px 0;
      border-radius: 50%;
      box-shadow: 0 0 0 2px @gray;
      background-color: @dark;
    }

    li.active {
      box-shadow: 0 0 0 2px @words;
      background-color: @lightWords;
    }
  }


}
</style>